<!--
 * @Description: 
 * @Author: xuechengwu
 * @Email: 516385822@qq.com
 * @Date: 2021-11-20 15:13:28
 * @LastEditTime: 2022-02-07 10:23:12
 * @LastEditors: xuechengwu
-->
<template>
  <div class="component-list">
      <div
        v-for="item in components"
        :key="item.name"
        draggable
        @dragend="dragEnd($event, item)"
        @dragstart="dragStart($event, item)"
        class="draggle-item"
      >
        {{ item.config.title }}
      </div>
  </div>
</template>

<script>
export default {
    computed: {
        components() {
            return window.A5.getComponents();
        }
    },
    methods: {
        dragStart(e, item) {
            this.$store.commit('SET_PAYLOAD', item.name);
        },
        dragEnd(e, item) {
            console.log('set payload==>', item.name);
            // this.$store.commit('SET_PAYLOAD', item.name);
        }
    },
}
</script>

<style lang="less" scoped>
.component-list {
    padding: 8px 12px;
}
.draggle-item {
    cursor: pointer;
    margin: 8px 0px;
    text-align: center;
    padding: 8px 12px;
    border: solid 1px #333;
}
</style>
